﻿@using thousandClear.Areas.Admin.Models;
@model GoodEditModel
@{
    ViewBag.Title = "修改商品";
    Layout = "~/Areas/Admin/Views/Shared/_Admin.cshtml";

}
<div id="app">
    <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">后台管理</strong> / <small>新增商品</small></div>
    </div>
    <div class="am-tabs am-margin" data-am-tabs>
        <ul class="am-tabs-nav am-nav am-nav-tabs">
            <li class="am-active"><a href="#tab1">基本信息</a></li>
        </ul>
        <div class="am-tabs-bd">
            <form action="" method="post" class="am-form" id="form">
                <fieldset>
                    <div class="am-form-group">
                        <label for="txtGoodName">商品名称:</label>
                        <input type="text" id="txtGoodName" placeholder="输入商品名称(必填)" required v-model="goodName" />
                    </div>
                    <div class="am-form-group">
                            <label for="txtGoodDesc">商品描述:</label>
                            <textarea id="txtGoodDesc" placeholder="请输入商品描述(至少10个字)" rows="4" required minlength="10" v-model="goodDesc">
                               
                            </textarea>
                        </div>
                    @*<div class="am-form-group">
                        <label for="txtGoodImgDesc">图文描述:</label>
                        <script id="txtGoodImgDesc" name="content" type="text/plain">
                            @Html.Raw(Model.ImgDesc)
                        </script>
                    </div>*@
                    <div class="am-form-group">
                        <label for="txtSalePrice">价格:</label>
                        <input type="number" id="txtSalePrice" placeholder="输入价格(必填)" required v-model="salePrice" />
                    </div>
                    <div class="am-form-group">
                        <label for="txtSalePrice">积分:</label>
                        <input type="number" id="txtCredit" placeholder="输入积分(必填)" required v-model="credit" />
                    </div>
                    @*<div class="am-form-group">
                            <label for="txtMarketPrice">市场价格:</label>
                            <input type="number" id="txtMarketPrice" placeholder="输入销售价格(必填)" required v-model="marketPrice"  />
                        </div>*@
                    @*<div class="am-form-group">
                            <label for="txtInventory">商品库存:</label>
                            <input type="number" id="txtInventory" placeholder="输入销售价格(必填)" required v-model="inventory"  />
                        </div>*@
                    @*<div class="am-form-group">
                            <label for="txtWeight">商品重量(克):</label>
                            <input type="number" id="txtWeight" placeholder="输入商品重量(必填)" required v-model="weight" />
                        </div>*@
                    <div class="am-form-group">
                        <label for="txtSeqNum">商品排序:</label>
                        <input type="number" id="txtSeqNum" placeholder="输入商品排序(必填)" required v-model="seqnum" />
                    </div>
                    <div class="am-form-group am-form-file">
                        <label>主图片</label>&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="am-btn am-btn-default am-btn-sm" v-if="imgUrl == ''">
                            <i class="am-icon-cloud-upload"></i> 上传图片
                        </button>
                        <!--http://placeholder.qiniudn.com/60x60-->
                        @if (string.IsNullOrEmpty(Model.ImgUrl))
                        {

                            <img id="imgImgUrl" v-bind:src="imgUrl" width="60px" height="60px" v-if="imgUrl != ''" />

                        }
                        else
                        {
                            <img id="imgImgUrl" src="@Model.UploadUrl/@Model.ImgUrl" width="60px" height="60px" v-if="imgUrl != ''" />

                        }
                        <input id="txtImgUrl" type="file">
                    </div>
                    <div class="am-form-group am-form-file">
                        <label>缩略图</label>&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="am-btn am-btn-default am-btn-sm" v-if="thumbUrl == ''">
                            <i class="am-icon-cloud-upload"></i> 上传图片
                        </button>
                        <!--http://placeholder.qiniudn.com/60x60-->
                        @if (string.IsNullOrEmpty(Model.ThumbUrl))
                        {

                            <img id="imgThumbUrl" v-bind:src="thumbUrl" width="60px" height="60px" v-if="thumbUrl != ''" />

                        }
                        else
                        {
                            <img id="imgThumbUrl" src="@Model.UploadUrl/@Model.ThumbUrl" width="60px" height="60px" v-if="thumbUrl != ''" />

                        }
                        <input id="txtThumbUrl" type="file">
                    </div>
                    <div class="am-form-group">
                        <label>是否上架: </label>
                        <input type="radio" value="0" name="rdbPutaway" v-model="putaway" required> 下架

                        <input type="radio" value="1" name="rdbPutaway" v-model="putaway"> 上架
                    </div>
                   
                    <div class="am-form-group">
                        <label>测试专用: </label>
                        <input type="radio" value="0" name="rdbMode" v-model="mode" required> 否

                        <input type="radio" value="1" name="rdbMode" v-model="mode"> 是
                    </div>
                    <input type="hidden" name="data" v-bind:value="data" />
                    <a href="~/admin/good?page=1&count=10" class="am-btn am-btn-danger">取消</a>
                    <button class="am-btn am-btn-secondary" v-on:click="save">提交</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>

@section Scripts{
    <script src="~/Statics/Venders/uedit-1.4.3.1/ueditor.config.js"></script>
    <script src="~/Statics/Venders/uedit-1.4.3.1/ueditor.all.min.js"></script>
    <script>
            var model = new Vue({
                el: '#app',
                data: {
                    id: @Model.Id,
                    goodName: '@Model.Name',
                    goodDesc: '@Model.Desc',
                    goodImgDesc: '',
                    salePrice:@Model.SalePrice,
                    marketPrice: @Model.MarketPrice,
                    inventory: @Model.Inventory,
                    putaway: @Model.Putaway,
                    imgUrl: '@Model.ImgUrl',
                    thumbUrl: '@Model.ThumbUrl',
                    weight: @Model.Weight,
                    scroll: @Model.Scroll,
                    mode: @Model.Mode,
                    seqnum: @Model.SeqNum,
                    credit: @Model.Credit,
                },
                computed: {
                    data: function () {
                        return JSON.stringify(this._data);
                    }
                },
                methods: {
                    previewImgUrl: function (e) {
                        var self = this;
                        var file = e.delegateTarget.files[0];
                        //在此可以对选择的文件进行判断:文件类型 文件大小等
                        //.....

                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = function (ret) {
                            picBase64 = reader.result
                            //预览图片
                            $("#imgImgUrl").attr({ "src": picBase64 });

                            self.imgUrl = picBase64;
                        }
                    },
                    previewThumbUrl: function (e) {
                        var self = this;
                        var file = e.delegateTarget.files[0];
                        //在此可以对选择的文件进行判断:文件类型 文件大小等
                        //.....

                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = function (ret) {
                            picBase64 = reader.result
                            //预览图片
                            $("#imgThumbUrl").attr({ "src": picBase64 });

                            self.thumbUrl = picBase64;
                        }
                    },
                    save: function(){
                        model.goodImgDesc = ue.getContent();
                        $('#form').submit();
                    }
                }
            })

            $('#doc-vld-msg').validator({
                onValid: function (validity) {
                    $(validity.field).closest('.am-form-group').find('.am-alert').hide();
                },

                onInValid: function (validity) {
                    var $field = $(validity.field);
                    var $group = $field.closest('.am-form-group');
                    var $alert = $group.find('.am-alert');
                    // 使用自定义的提示信息 或 插件内置的提示信息
                    var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

                    if (!$alert.length) {
                        $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
                          appendTo($group);
                    }

                    $alert.html(msg).show();
                }
            });
            $('.admin-sidebar-good').addClass('current');

            var $txtImgUrl = $('#txtImgUrl');
            var $txtThumbUrl = $('#txtThumbUrl');

            $txtImgUrl.change(model.previewImgUrl);
            $txtThumbUrl.change(model.previewThumbUrl);

            var ue = UE.getEditor('txtGoodImgDesc',{
                initialFrameWidth: 800,
                autoHeightEnabled: true,
            });
            ue.addListener('selectionchange', function() {
                model.goodImgDesc = ue.getContent();
            });
        
    </script>
}

